<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://xmlns.jcp.org/jsf/html"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
       xmlns:p="http://primefaces.org/ui"
       xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <ui:composition>
        <f:metadata>
            <f:event listener="#{eventPageBean.postConstruct()}" type="preRenderView" />
        </f:metadata>
        <ui:decorate template="/template/common/commonLayout.xhtml">
            <ui:define name="content">
                <h:form id="eventDetails">
                    <p:panelGrid styleClass="centered" style="width: 50%;">
                        <p:row>
                            <p:column colspan="2" >
                                <h1 style="text-align: center">#{eventPageBean.event.title}</h1>
                                <p:commandLink action="#{eventPageBean.remove()}" value="Remove" rendered="#{eventPageBean.ownedEvent}" style="float:left;"/>
                                <p:commandButton value="Decline" action="#{eventPageBean.declineInvite()}" rendered="#{(eventPageBean.declinable)?true:false}" immediate="true" style="float: right" />
                                <p:commandButton value="Join" action="#{eventPageBean.joinEvent()}" oncomplete="if (args &amp;&amp; !args.validationFailed)" rendered="#{(eventPageBean.joinable)?true:false}" style="float: right"/> 
                                <p:selectOneMenu id="CalendarForEvent"  value="#{eventPageBean.calendar}" required="true" converter="CalendarConverter" rendered="#{(eventPageBean.joinable)?true:false}" style="position: relative; bottom: -2px; float: right">
                                    <f:selectItem itemValue="" itemLabel="Select Calendar"  />
                                    <f:selectItems value="#{eventPageBean.calendars}" var="cal" itemValue="#{cal}"  itemLabel="#{cal.title}" />
                                </p:selectOneMenu>
                                <p:commandButton value="Postpone" style="float: right; bottom: -152px" action="#{eventPageBean.postpone()}" immediate="true" rendered="#{(eventPageBean.postponable)?true:false}"/>
                                <h:outputText id="suggestedDate" value="#{eventPageBean.suggestedDate}" style="position: relative; float: right; bottom: -160px" rendered="#{(eventPageBean.postponable)?true:false}" >
                                    <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
                                </h:outputText>
                                <h:outputLabel for="suggestedDate" value='Suggested Date: ' style="font-weight: bold; position: relative; float: right; bottom: -160px" rendered="#{(eventPageBean.postponable)?true:false}"/>
                                <p:panel header="Forecasted Weather:" style="text-align:center; vertical-align: middle; width: 85px; float: right; bottom: -152px" rendered="#{(eventPageBean.postponable)?true:false}" >
                                    <h:panelGrid columns="1" style="text-align: center; width:50px; height: 120px; ">
                                        <p:graphicImage name="img/#{eventPageBean.suggestedWeather.condition}.png" width="30px" /> 

                                        <h:outputText value="#{eventPageBean.suggestedWeather.tmax}" />
                                        <h:outputText value="#{eventPageBean.suggestedWeather.tmin}" />

                                    </h:panelGrid>
                                </p:panel>
                                <h:outputLabel value="No suggested date available" style="font-weight: bold; float: right;" rendered="#{eventPageBean.weatherNotification and eventPageBean.ownedEvent and !eventPageBean.thereSuggestedDate}" />

                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Start Date"/>
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?false:true}">
                                <h:outputText value="#{eventPageBean.event.date}" >
                                    <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss"/>
                                </h:outputText>
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?true:false}">
                                <p:calendar value="#{eventPageBean.event.date}" pattern="MM/dd/yyyy HH:mm:ss"/>

                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="End Date"/>
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?false:true}">
                                <h:outputText value="#{eventPageBean.event.endDate}" >
                                    <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss"/>
                                </h:outputText>
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?true:false}">
                                <p:calendar value="#{eventPageBean.event.endDate}" pattern="MM/dd/yyyy HH:mm:ss"/>

                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Event Type"/>                            
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?false:true}">
                                <h:link outcome="/user/eventType.xhtml" value="#{eventPageBean.event.type.title}">
                                    <f:param name="id" value="#{eventPageBean.event==null?0:eventPageBean.event.type.id  }"/>
                                </h:link>
                  
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?true:false}">
                                <p:selectOneMenu id="TypeForEvent" value="#{eventPageBean.event.type}" immediate="true" required="true"  converter="EventTypeConverter" >
                                    <f:selectItem itemLabel="Select Type"  noSelectionOption="true" /> 
                                    <f:selectItems value="#{eventPageBean.userTypes}" var="type" itemValue="#{type}" itemLabel="#{type.title}" />
                                    <p:ajax process="@this" update="eventTypeLink"/>
                                </p:selectOneMenu>
                                <h:link id='eventTypeLink' outcome="/user/eventType.xhtml" style="margin-left: 10px;" value="View Event Type">
                                    <f:param name="id" value="#{eventPageBean.event==null?0:eventPageBean.event.type.id  }"/>
                                </h:link>
                                <h:link outcome="/user/eventType.xhtml" style="margin-left: 10px;" value="Create Event Type">
                                    <f:param name="id"  value="newEventType"/>
                                </h:link>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Visibility"/>                            
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?false:true}">
                                <h:outputText value="#{eventPageBean.event.visibility}"/>                            
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?true:false}">
                                <p:selectOneMenu id="VisibilityForEvent" value="#{eventPageBean.event.visibility}" required="true">
                                    <f:selectItems value="#{eventPageBean.visibilities}" />
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Location"/>                            
                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?false:true}">
                                <h:outputText id="addressForEvent" value="#{eventPageBean.event.location}"/>   
                                <p:commandButton id="btn" type="button"  value="Show" style="margin-left:5px;" onclick="PF('dlg').show();
                                        centerMapOnLocation();" />


                            </p:column>
                            <p:column rendered="#{eventPageBean.ownedEvent?true:false}">
                                <p:inputText id="addressForEventInput" value="#{eventPageBean.geoLoc}" onblur="codeAddressInput()" onkeyup="codeAddressInput()" />
                                <p:commandButton id="btn2" type="button"  value="Show" style="margin-left:5px;" onclick="PF('dlg').show();
                                        centerMapOnLocationWithInput();" />
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Weather: "/>                            
                            </p:column>
                            <p:column>
                                <p:dataGrid var="forecast" value="#{eventPageBean.forecasts}" columns="10" layout="grid"
                                            rows="1"  id="forecasts"

                                            rowsPerPageTemplate="10" >
                                    <p:panel header="#{forecast.formattedDate}" style="text-align:center">
                                        <h:panelGrid columns="1" style="width:70px; height: 120px">
                                            <p:graphicImage name="img/#{forecast.condition}.png" width="30px" /> 

                                            <h:outputText value="#{forecast.tmax}" />
                                            <h:outputText value="#{forecast.tmin}" />


                                        </h:panelGrid>
                                    </p:panel>

                                </p:dataGrid>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText value="Participant"/>                            
                            </p:column>
                            <p:column>
                                <p:dataList value="#{eventPageBean.participant}" id="parList" styleClass="participantlist" var="par" type="definition">
                                    <p:outputPanel style="height:50px; width: 100%; display: block; line-height: 50px;">
                                        <p:graphicImage style="height: 100%; display: block; float: left;" value="#{par.profilePhoto}"/> 
                                        #{par.title}
                                    </p:outputPanel>
                                </p:dataList>
                            </p:column>
                        </p:row>
                        <p:row rendered="#{eventPageBean.invitePermission}">
                            <p:column>
                                <h:outputText value="Invite"/>                            
                            </p:column>
                            <p:column>
                                <p:autoComplete id="toInvite" multiple="true" value="#{eventPageBean.toInvite}" completeMethod="#{eventPageBean.complete}"
                                                var="user" itemLabel="#{user.title}" itemValue="#{user}" converter="UserConverter" forceSelection="true">
                                    <f:param name="id" value="#{eventPageBean.event==null?0:eventPageBean.event.id  }"/>

                                    <p:column>
                                        <p:outputPanel style="height:50px; width: 100%; display: block; line-height: 50px;">
                                            <p:graphicImage style="height: 100%; display: block; float: left;" value="#{user.profilePhoto}"/> 
                                            #{user.title}
                                        </p:outputPanel>
                                    </p:column>
                                </p:autoComplete>     

                                <p:commandButton id="sendInvitesButton" value="Send Invites" action="#{eventPageBean.sendInvites}" update="@form" >
                                    <f:param name="id" value="#{eventPageBean.event==null?0:eventPageBean.event.id  }"/>

                                </p:commandButton>
                            </p:column>
                        </p:row>
                        <p:row rendered="#{eventPageBean.ownedEvent}">
                            <p:column>
                                <p:commandButton action="#{eventPageBean.reset}" value="Reset" update="@form"/>

                            </p:column>
                            <p:column>
                                <p:commandButton action="#{eventPageBean.save}" value="Save" update="@form">
                                    <f:param name="id" value="#{eventPageBean.event==null?0:eventPageBean.event.id  }"/>
                                </p:commandButton>
                            </p:column>
                        </p:row>
                    </p:panelGrid>
                    <p:dialog id="gmapDialog" widgetVar="dlg" width="30%" height="30%" modal="false">
                        <p:gmap id="gmap" widgetVar="gmap" center="36.1699412, -115.13982959999998" 
                                zoom="15" type="HYBRID" style="width:100%;height:50vh;" 
                                />
                    </p:dialog>

                </h:form>

                <h:form>
                    <p:remoteCommand name="gc" process="@this @form" autoRun="false"  actionListener="#{eventPageBean.onGeolocation()}" />

                </h:form>
            </ui:define>
        </ui:decorate>
    </ui:composition>
</html>

